<template>
    <div class="caseContent">
        <div class="mobile" v-if="isCarPhone === 0">
            <div class="vehicle">
               <div class="car">无牌照车辆</div>
               <div class="noCar" v-if="isEeterEnd !== 0" @touchstart.stop="noLicense(1)">有牌照车辆录入></div>
            </div>
            <div class="phone">手机号码</div>
            <div class="enter">
                  <input readonly type="text" @touchstart.stop="showKey" v-model="phoneVal">
            </div>
            <div class="instruction" @touchstart="showModal">
                <img src="../../assets/images/shuoming.png" alt="">
                <span>停车费用说明</span>
            </div>
            <div class="btn" :disabled="loadingCarNo" @click="searchPrice">
                    录入车牌
            </div>
        </div>
        <div class="carBrand" v-if="isCarPhone === 1  && isEeterEnd !== 0">
          <div class="carCode">
               <div class="car">车牌号码</div>
               <div class="noCar" @touchstart="noLicense(0)">无牌照车辆录入></div>
          </div>
          <div class="carCard" ref="carCard">
                  <div v-for="(item, index) in carNoList" :key="index">
                        <input readonly type="text" v-model="item.value" :class="{input : 'input',on : cpIndex === index, bg : carNoList.length - 1 === index && item.value}" @touchstart.stop="cpChangeIndex(index,item)" maxlength="1">
                        <span v-if="index === 1">●</span>
                </div>
          </div>
          <div class="instruction">
              <img src="../../assets/images/shuoming.png" alt="">
              <span  @touchstart="showModal">停车费用说明</span>
          </div>
          <div class="btn" @click="searchPrice">
                  录入车牌
          </div>
        </div>
        <modal ref="refModal"></modal>
        <div @touchstart.stop>
            <keyboard ref="keyboard" :isCarPhone="isCarPhone" @changephone="changephone"></keyboard>
        </div>
  </div>
</template>
<script>
import keyboard from '@/components/keyboard/index.vue'
import modal from '@/components/modal/index.vue'
import qs from 'qs';
export default {
  props:["isEeterEnd"],
	components: {
	  keyboard,
	  modal
	},
	data () {
		return {
			phoneVal: '',
			cousor: null,
			isCarPhone: 1, // 1车牌  0手机号
			cpIndex: 0, // 车牌当前选中值
			loadingCarNo : false,
      carNoList : [
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        },
        {
          value : ""
        }
      ]
		}
	},
  created () {
    console.log(this.$route.query);
  },
	methods : {
    searchPrice () {
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let carReg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
      let carNo = [];
      this.carNoList.map(item=>{
        if (item.value) {
          carNo.push(item.value)
        }
      });
      if (carNo.length < 1 && this.isCarPhone === 1) {
        alert("请填写车牌");
        return
      } else if (!carReg.test(carNo.join("")) && this.isCarPhone === 1) {
        console.log(carNo.join(""))
        alert("车牌号不符合规则，请检查");
        return
      } else if (!phoneReg.test(this.phoneVal) && this.isCarPhone === 0) {
        alert("手机号不符合规则，请检查");
        return
      } else if (!this.phoneVal && this.isCarPhone === 0) {
        alert("手机号不能为空");
        return
      }
      this.loadingCarNo = true;
      this.axios.post("/order/noplateInRecord",{
        inLand : this.$route.query.LID,
        sid : this.$route.query.SID,
        pid : this.$route.query.PID,
        parkId : this.$route.query.ParkID,
        carNo : this.isCarPhone === 1 ? carNo.join("") : this.phoneVal
      }).then(res=>{
        this.loadingCarNo = false;
        if (res.data.success) {
          if (this.isCarPhone === 1) {
            this.carNoList.forEach(item=>{
              item.value = "";
            });
          } else {
            this.phoneVal = "";
          }
          alert(res.data.data.message);
        } else {
          alert(res.data.message);
        }
      });
    },
		// 显示模块
		showModal () {
      this.$refs.refModal.showModal()
		},
		// 键盘返回值
		async changephone (val, isDel) {
			if (this.isCarPhone === 0) {
				if (isDel === 'del') {
				this.phoneVal = this.phoneVal.substring(0, this.phoneVal.length - 1)
				} else {
        if (this.phoneVal.length == 11) {
          alert("请输入11位数的手机号");
          return;
        }
				this.phoneVal = this.phoneVal + val
				}
			} else {
				if (isDel === 'del') {
					this.carNoList[this.cpIndex].value = ''
					await this.$nextTick()
					if (this.cpIndex !== 0) {
						this.cpIndex = this.cpIndex
					}
				} else {
					this.carNoList[this.cpIndex].value = val
					await this.$nextTick()
				if (this.cpIndex < this.carNoList.length - 1 && val !== '') {
					this.cpIndex = ++this.cpIndex
				}
				}
			}
		},
		// 当前索引触发
		cpChangeIndex (index,item) {
			this.cpIndex = index
			this.showKey(index == 0 ? 1 : 0)
		},
		// 无牌照切换
		noLicense (num) {
			this.isCarPhone = num
		},
		// 显示键盘
		showKey (index) {
			this.$refs.keyboard.showKey(index == 0 ? 1 : 0);
		},
		// 隐藏键盘
		finishKey () {
			this.$refs.keyboard.finishKey()
		}
	}
}
</script>
<style scoped lang="scss">
    .caseContent{
        width: 92%;
        height: 4.5rem;
        margin: 0 auto;
        border-radius: 0.1rem;
        box-shadow: 1px 1px 2px 2px rgb(236, 236, 236, 0.3);
        margin-top: 0.6rem;
        background: #fff;
        text-align: left;
        padding: 0 0.3rem;
        border: solid 1px rgb(236, 236, 236, 0.3);
        box-sizing: border-box;
        .mobile{
        .vehicle{
          font-size: 0.3rem;
          line-height: 1rem;
          height: 1rem;
          .car{
            float: left;
          }
          .noCar {
          color: #0085F5;
          float: right;
          }
        }
        .phone{
            font-size: 0.4rem;
            font-weight: bold;
            color: #1A1A1AFF;
        }
        .enter{
            color: #999999FF;
            border-bottom: solid 1px #F2F2F2FF;
            font-size: 0.33rem;
            line-height: 0.5rem;
            box-sizing: border-box;
            padding-top: 0.3rem;
            height: 1rem;
            input{
               width: 100%;
               height: 0.5rem;
               font-size: 0.33rem;
               outline:none;
               border: none;
            }
        }
      }
      .carBrand{
          height: 1rem;
            .carCode{
                font-size: 0.3rem;
                line-height: 1rem;
                height: 1rem;
               .car{
                  float: left;
               }
               .noCar {
                color: #0085F5;
                float: right;
               }
            }
            .carCard{
              height : 1rem;
              margin-top: 0.2rem;
              div{
                  width: 0.6rem;
                  height: 0.8rem;
                  float: left;
                  margin-left: 0.1rem;
                  input{
                    width: 0.6rem;
                    float: left;
                    outline: none;
                    caret-color: rgba(0,0,0,0);
                    height: 0.8rem;
                    font-size: 0.3rem;
                    text-align: center;
                    border: solid 1px #ccc;
                    border-radius: 0.1rem;
                  }
                  input.on {
                    border: solid 1px #1eef1e;
                  }
              }
              div:nth-child(2) {
                 width: 1.1rem !important;
                 line-height: 0.8rem;
                 span{
                   margin-left: 0.2rem;
                   font-size: 0.1rem;
                   float: left;
                 }
              }
              div:last-child input{
                 border: dashed 1px #ccc;
                 background: url('../../assets/images/energy.png') 80% 60% no-repeat;
                 background-size: 90% 70%;
              }
              div:last-child input.on {
                 border: dashed 1px #1eef1e;
              }
              div:last-child input.bg{
                background: none;
              }
            }
        }
        .btn{
            width: 3rem;
            height: 0.8rem;
            margin: 0 auto;
            margin-top: 0.3rem;
            display: block;
            color: #fff;
            text-align: center;
            line-height: 0.8rem;
            font-size: 0.3rem;
            background: url('../../assets/images/btn.png') 100% 100% no-repeat;
            background-size: 100% 100%;
        }
        .instruction {
            margin-top: 0.2rem;
            line-height: 0.3rem;
            text-align: right;
            img {
                width: 0.3rem;
                height: 0.3rem;
            }
            span{
                float: right;
                margin-left: 0.1rem;
                color: #0085F5FF;
            }
            font-size: 0.3rem;
        }
}
</style>
